var height=screen.availHeight;
var getCon=document.getElementsByClassName('content');
var getConRight=document.getElementsByClassName('content-right');
var getConLeft=document.getElementsByClassName('content-left');
var button=document.getElementById('button');
var flag=0;

onload=function () {
    document.getElementById('nav').style.height=height+'px';
}
function show(num) {
    getCon[num].style.backgroundColor='#117a8b';
    getConRight[num].style.display='block';
}
function hide(num) {
    getCon[num].style.backgroundColor='';
    getConRight[num].style.display='none';
}

function noneOpen(num) {/*打开和关闭按钮的事件*/
    if(num%2){
        document.getElementById('nav').style.width='0px';
        for(var i=0;i<getCon.length;i++){
            getCon[i].style.display='none';
        }
        button.value='打开';
    }
    else{
        document.getElementById('nav').style.width='4%';
        for(var i=0;i<getCon.length;i++){
            getCon[i].style.display='block';
        }
        button.value='收起';
    }
}
/*监听事件*/
for(var i=0;i<getConLeft.length;i++){
    getConLeft[i].num=i;
    getConRight[i].num=i;
    getConLeft[i].addEventListener('mouseover',function () {
        show(this.num);
    },false);

    getConLeft[i].addEventListener('mouseout',function () {
        hide(this.num);
    },false);

    getConRight[i].addEventListener('mouseout',function () {
        hide(this.num);
    },false);

    getConRight[i].addEventListener('mouseover',function () {
        show(this.num);
    },false);

}

button.addEventListener('click',function () {
    noneOpen(++flag);
},false);
